<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>包裹管理</el-breadcrumb-item>
      <el-breadcrumb-item>所有包裹</el-breadcrumb-item>
    </el-breadcrumb>
    <v-searchTable :pageSize="10" url="/api/Package/GetAll?" border class="party_table" rowkey="package_id" placetext="快递单号" stripe :searchKeys="allSearchKeys">
      <template slot="head">
        <el-form :inline="true" :model="searchForm" class="search-container">
          <el-form-item label="单号">
            <el-input v-model="searchForm.expressNo" placeholder="快递单号"></el-input>
          </el-form-item>
          <el-form-item label="状态">
            <el-select v-model="searchForm.status" placeholder="包裹状态">
              <el-option label="已预报" value="1"></el-option>
              <el-option label="已到货" value="4"></el-option>
              <el-option label="已到货(不包含退货)" value="-4"></el-option>
              <el-option label="已发货" value="8"></el-option>
              <el-option label="退货申请" value="2"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="预报时间">
              <el-date-picker
                v-model="searchForm.prediction"
                align="right"
                type="date"
                placeholder="选择日期"
                :picker-options="pickerOptions">
          </el-date-picker>
          </el-form-item>
          <el-form-item label="入仓时间">
              <el-date-picker
                v-model="searchForm.arrival"
                align="right"
                type="date"
                placeholder="选择日期"
                :picker-options="pickerOptions">
          </el-date-picker>
          </el-form-item>
          <el-form-item label="出仓时间">
              <el-date-picker
                v-model="searchForm.left"
                align="right"
                type="date"
                placeholder="选择日期"
                :picker-options="pickerOptions">
          </el-date-picker>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit">查询</el-button>
          </el-form-item>
        </el-form>
      </template>
      <el-table-column type="selection" width="30" align="center">
      </el-table-column>
      <el-table-column prop="express_no" label="快递单号" width="140px" align="center">
      </el-table-column>
      <el-table-column prop="weight" :formatter="weightFormat" label="重量" width="150px" align="center">
      </el-table-column>
      <el-table-column prop="prediction_date" label="预报时间" align="center">
      </el-table-column>
      <el-table-column prop="arrival_date" label="入库时间" align="center">
      </el-table-column>
      <el-table-column prop="left_date" label="出库时间" align="center">
      </el-table-column>
      <el-table-column prop="status" label="状态" :formatter="statusFormat" align="center">
      </el-table-column>
      <el-table-column prop="description" label="备注" align="center">
      </el-table-column>
      <el-table-column label="操作" align="center" width="250px">
        <template slot-scope="scope">
          <el-button size="small" type="success" plain @click="detail(scope.row.package_id)">详情</el-button>
        </template>
      </el-table-column>
    </v-searchTable>
    <el-dialog title="收货地址" :visible.sync="detailVisible">
      <table>
        <tr>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
        </tr>
      </table>
      <div slot="footer" class="dialog-footer">
        <el-button @click="detailVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitForm('packageInfo')">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import SearchTable from './../../components/SearchTableServer'
export default {
  data () {
    return {
      packageList: [],
      allSearchKeys: ['package_id'],
      detailVisible: false,
      packageInfo: {
      },
      rules: {
        express_no: [
          { required: true, message: '请输入快递单号', trigger: 'blur' }
        ]
      },
      searchForm: {
        expressNo: '',
        status: '',
        prediction: '',
        arrival: '',
        left: ''
      },
      pickerOptions: {
        shortcuts: [{
          text: '明天',
          onClick (picker) {
            const date = new Date()
            date.setTime(date.getTime() + 3600 * 1000 * 24)
            picker.$emit('pick', date)
          }
        },
        {
          text: '今天',
          onClick (picker) {
            picker.$emit('pick', new Date())
          }
        },
        {
          text: '昨天',
          onClick (picker) {
            const date = new Date()
            date.setTime(date.getTime() - 3600 * 1000 * 24)
            picker.$emit('pick', date)
          }
        }]
      }
    }
  },
  props: {
    status: Number
  },
  components: {
    'v-searchTable': SearchTable
  },
  methods: {
    weightFormat: function (row, column) {
      if (row.weight === null) {
        return ''
      }
      return row.weight + 'kg'
    },
    statusFormat: function (row, column) {
      switch (row.status) {
        case 8:
          return '已预报'
        case 32:
          return '已到货'
        default:
          return '未知'
      }
    },
    detail: function (id) {
      this.detailVisible = true
    },
    submitForm (formName) {
      let self = this
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.$axios.put('/api/Package/PredictionEdit?id=' + this.packageInfo.package_id, this.packageInfo, { msg: '编辑成功' }).then(function (data) {
            if (data.length !== 0) {
              self.tempRow.package_id = self.packageInfo.package_id
              self.tempRow.express_no = self.packageInfo.express_no
              self.tempRow.description = self.packageInfo.description
              self.showEditDialog = false
            }
          })
        } else {
          self.$refs[formName].disabled = false
          return false
        }
      })
    },
    onSubmit () {
      console.log('submit!')
    }
  }
}
</script>
